<template>
<div class="out_box">
  <div class="preview">
   <div class="block">
    <el-carousel height="300px" indicator-position="none">
      <el-carousel-item v-for="banner in banners" :key="banner">
       <img :src="banner" class="imgsize1">
      </el-carousel-item>
    </el-carousel>
  </div>
  </div>
  </div>
</template>

<script>
import {getBookDetail} from '../api/Book/book'
  export default {
    name: 'Carrousel',
    props:["id"],
    data() {
      return {
       
        currbid:this.id,
        banners:[],
     
      }
    },
    methods: {
  
    },
    computed: {
   
    },
    mounted() {
      getBookDetail(this.id).then((res)=>{
        if(res.flag){
          this.banners.push('http://124.223.89.139/pic/'+res.data.detailImg1)
           this.banners.push('http://124.223.89.139/pic/'+res.data.detailImg2)
            this.banners.push('http://124.223.89.139/pic/'+res.data.detailImg3)
             this.banners.push('http://124.223.89.139/pic/'+res.data.detailImg4)
        }
      })
    }
  }
</script>

<style  scoped>

  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  }
.imgsize1
{
  width: 400px;
  height: 300px;
}
.imgsize2
{
  width: 100px;
  height: 50px;
}
.inner_box
{
overflow: hidden;
 
  height: 300px;
}
.out_box
{

 width: 352px;
 height: 522px;
}
</style>
